.UIItemSelector {
  margin: 2px 0px 2px 2px;/* orientation=lt */
  margin: 2px 2px 2px 0px;/* orientation=rt */
}

.UIItemSelector .ItemDetailList .TemplateContainer .PortalOfficeImage {
  height: 222px;
  background: url('background/TemplateContainer.jpg') no-repeat center -614px;
}

.UIItemSelector .ItemDetailList .TemplateContainer .PortalDefaultImage {
  height: 222px;
  background: url('background/TemplateContainer.jpg') no-repeat center -392px;
}

.UIItemSelector .ItemDetailList .TemplateContainer .PageDefaultImage {
  height: 222px;
  background: url('background/TemplateContainer.jpg') no-repeat center -392px;
}

.UIItemSelector .ItemDetailList .TemplateContainer .PageDesktopImage {
  height: 222px;
  background: url('background/TemplateContainer.jpg') no-repeat center -836px;
}

.UIItemSelector .ItemDetailList .TemplateContainer .ClassicPortalImage {
  height: 222px;
  background: url('background/TemplateContainer.jpg') no-repeat center -392px;
	margin-top: 9px;
}

.UIItemSelector .ItemDetailList .TemplateContainer .WebOSPortalImage {
  height: 222px;
  background: url('background/TemplateContainer.jpg') no-repeat center -170px;
	margin-top: 9px;
}

.UIItemSelector .TemplateContainer .DefaultImage {
  height: 222px;
  background: url('background/TemplateContainer.jpg') no-repeat center -392px;
}

.UIItemSelector .ItemDetailList .TemplateContainer .DesktopImage {
  background: url('background/TemplateContainer.jpg') no-repeat center -836px;
  height: 222px;
}

.UIItemSelector .ItemDetailList .LayoutHolder .DesktopImage {
  background: url('background/TemplateContainer.jpg') no-repeat top left;
  height: 170px;
  width: 270px;
  margin: auto;
}

.UIItemSelector .ItemDetailList .ItemDescription {
  height: 100px; 
  background: white;
  border: solid 1px #b7b7b7;
  padding: 2px;
}

.UIItemSelector .ItemDetailList .ItemDetail .ItemValueDescription {
  width: 50%; height: 53px; 
  padding-left: 15px;/* orientation=lt */
  padding-right: 15px;/* orientation=rt */
  margin-top: 12px; 
  overflow: auto;
  border: none;
}
/*=================Right Column Style======================*/
.UIItemSelector .RightColumnStyle {
  width: 99.5%;
  overflow: hidden;
}

.UIItemSelector .RightColumnStyle .ItemListContainer {
  float: right;/* orientation=lt */
  float: left;/* orientation=rt */
  width: 220px;
}

.UIItemSelector .ItemListContainer .ItemList {
  border: 1px #c7c7c7 solid;
  background: white url('background/ItemList.jpg') no-repeat right bottom;
  height: 240px;
  overflow: auto;
}

.UIItemSelector .RightColumnStyle .ItemListContainer .ItemListBackground {
  background: white url('background/ItemList.jpg') no-repeat right bottom;
  height: 258px;
}

.UIItemSelector .RightColumnStyle .ItemDetailList {
  height: auto;
  margin-right: 225px;/* orientation=lt */
  margin-left: 225px;/* orientation=rt */
  padding: 1px ;
}

.UIItemSelector .RightColumnStyle .ItemDetailList .ItemDetail {
  height: 240px;
  background: white;
  border: 1px #C7C7C7 solid ;
}

.UIItemSelector .RightColumnStyle .ItemDetailList .ItemDetailTitle{
  height: 23px;
}

.UIItemSelector .RightColumnStyle .ItemDetailList .ItemDetailContainer{
 	background: #ffffff;
}

.UIItemSelector .RightColumnStyle .ItemListTitle {
	height: 23px;
}

.UIItemSelector .RightColumnStyle .ItemListTitle .ArrowS1Down16x16Icon {
  margin: 3px 0px 0px 4px;/* orientation=lt */
  margin: 3px 4px 0px 0px;/* orientation=rt */
  background: url('/eXoResources/skin/DefaultSkin/skinIcons/16x16/icons/MacSkin/GrayAquaDownArrow.png') no-repeat;
  width: 18px; height: 18px;
}

.UIItemSelector .RightColumnStyle .TitleIcon {
  float: left;/* orientation=lt */
  float: right;/* orientation=rt */
  margin: 0px 5px 0px 5px;
}

.UIItemSelector .RightColumnStyle .Title {
  line-height: 22px;
  font-weight: bold; color: #5c5c5c; 
  float: left;/* orientation=lt */
  float: right;/* orientation=rt */
}

.UIItemSelector .RightColumnStyle .ItemListIcon {
	width: 16px; height: 16px;
	background: url('background/SelectedItem.gif') no-repeat left -418px;

}

.UIItemSelector .RightColumnStyle .ViewListIcon {
	width: 16px; height: 16px;
	background: url('background/SelectedItem.gif') no-repeat left -434px;
	margin-top: 3px;
}

/*##########################- Default Item  -#########################*/

.UIItemSelector .RightColumnStyle .ItemList .Item {
  height: 26px ; 
  cursor: pointer ;
  border-bottom: 1px solid #dfdfdf;
}

.UIItemSelector .RightColumnStyle .ItemList .Item .LeftItem {
  height: 26px;
  background: url('background/SelectedItem.gif') no-repeat left top;/* orientation=lt */
  background: url('background/SelectedItem-rt.gif') no-repeat right top;/* orientation=rt */
  padding-left: 15px;/* orientation=lt */
  padding-right: 15px;/* orientation=rt */
}

.UIItemSelector .RightColumnStyle .ItemList .Item .RightItem {
  height: 26px; line-height: 26px;
}

.UIItemSelector .RightColumnStyle .ItemList .Item .ItemTitle {
  height: 26px; line-height: 26px;
  padding-left: 3px;/* orientation=lt */
  padding-right: 3px;/* orientation=rt */
}

/*###########################- Over Item (When mouse over on this item) -############################*/

.UIItemSelector .RightColumnStyle .ItemList .OverItem {
  height: 26px ;
  cursor: pointer ;
  background: url('background/SelectedItem.gif') repeat-x left -104px;
}

.UIItemSelector .RightColumnStyle .ItemList .OverItem .LeftItem {
  background: url('background/SelectedItem.gif') no-repeat left -52px;/* orientation=lt */
  background: url('background/SelectedItem-rt.gif') no-repeat right -52px;/* orientation=rt */
  padding-left: 15px;/* orientation=lt */
  padding-right: 15px;/* orientation=rt */
}


.UIItemSelector .RightColumnStyle .ItemList .OverItem .RightItem {
  height: 26px; line-height: 26px; 
  background: url('background/SelectedItem.gif') repeat-x left -104px;
}

.UIItemSelector .RightColumnStyle .ItemList .OverItem .ItemTitle {
  height: 26px; line-height: 26px; 
  color: #f67a02;
  padding-left: 3px;/* orientation=lt */
  padding-right: 3px;/* orientation=rt */
}

/*##########################- Selected Item  (When Item is selected)-#########################*/

.UIItemSelector .RightColumnStyle .ItemList .SelectedItem {
  height: 26px ;
  cursor: pointer ;
}

.UIItemSelector .RightColumnStyle .ItemList .SelectedItem .LeftItem {
  background: url('background/SelectedItem.gif') no-repeat left -26px;/* orientation=lt */
  background: url('background/SelectedItem-rt.gif') no-repeat right -26px;/* orientation=rt */
  padding-left: 15px;/* orientation=lt */
  padding-right: 15px;/* orientation=rt */
}

.UIItemSelector .RightColumnStyle .ItemList .SelectedItem .RightItem {
  height: 26px; line-height: 26px;
  background: url('background/SelectedItem.gif') repeat-x left -78px;
}

.UIItemSelector .RightColumnStyle .ItemList .SelectedItem .ItemTitle {
  height: 26px; line-height: 26px; 
  color: #0575CA;; 
  padding-left: 3px;/* orientation=lt */
  padding-right: 3px;/* orientation=rt */
}

/*#######################################-----RightColumnBigItemStyle-----####################################*/


.UIItemSelector .RightColumnBigItemStyle {
  overflow: hidden;
  width: 99.5%;
}

.UIItemSelector .RightColumnBigItemStyle .ItemListContainer {
  float: right; /* orientation=lt */
  float: left; /* orientation=rt */
  width: 210px;
}

.UIItemSelector .RightColumnBigItemStyle .ItemListContainer .ItemList {
  border: 1px #b7b7b7 solid;
  background: white url('background/ItemList.jpg') no-repeat right bottom;
  height: 290px;
}

.UIItemSelector .RightColumnBigItemStyle .ItemDetailList {
  border: 1px #b7b7b7 solid;
  background: white;
  padding: 1px; 
  margin-right: 220px; /* orientation=lt */
  margin-left: 220px; /* orientation=rt */
  height: 290px;
}

.UIItemSelector .RightColumnBigItemStyle .ItemListContainer .ItemListTitle {
  font-size: 12px; text-align: center;
  height: 19px; line-height: 19px;
  border: solid 1px #b7b7b7;
  font-weight: bold; 
  margin-bottom: 2px;
  background: url('/eXoResources/skin/DefaultSkin/background/TitleBG1x20.gif') repeat-x;
}

.UIItemSelector .RightColumnBigItemStyle .ImageDecorator {
  height: 230px;
  padding: 5px;
}

/*###########################- Item Default -#############################*/
.UIItemSelector .RightColumnBigItemStyle .ItemList .Item {
  margin: 13px 6px;
  height: 32px;
  cursor: pointer;
}

.UIItemSelector .RightColumnBigItemStyle .ItemList .Item .UserAccountIcon { 
  height: 32px;
  background: url('background/BigStyleUserAccountItem.gif') no-repeat;
}

.UIItemSelector .RightColumnBigItemStyle .ItemList .Item .MembershipIcon {  
  height: 32px;
  background: url('background/BigStyleMembershipItem.gif') no-repeat;
}

.UIItemSelector .RightColumnBigItemStyle .ItemList .Item .UserProfileIcon {  
  height: 32px;
  background: url('background/SelectedItem.gif') no-repeat left -130px; /* orientation=lt */
  background: url('background/SelectedItem-rt.gif') no-repeat right -130px; /* orientation=rt */
  padding-left: 30px; /* orientation=lt */
  padding-right: 30px; /* orientation=rt */
}

.UIItemSelector .RightColumnBigItemStyle .ItemList .Item .UserHomeInfoIcon {    
  height: 32px;
  background: url('background/SelectedItem.gif') no-repeat left -162px; /* orientation=lt */
  background: url('background/SelectedItem-rt.gif') no-repeat right -162px; /* orientation=rt */
  padding-left: 30px; /* orientation=lt */
  padding-right: 30px; /* orientation=rt */
}

.UIItemSelector .RightColumnBigItemStyle .ItemList .Item .UserBusinessInfoIcon {
  height: 32px;
  background: url('background/SelectedItem.gif') no-repeat left -194px; /* orientation=lt */
  background: url('background/SelectedItem-rt.gif') no-repeat right -194px; /* orientation=rt */
  padding-left: 30px; /* orientation=lt */
  padding-right: 30px; /* orientation=rt */
}

.UIItemSelector .RightColumnBigItemStyle .ItemList .Item .ItemName {
  height: 32px; line-height: 32px;
  background: url('background/SelectedItem.gif') no-repeat right -322px; /* orientation=lt */
  background: url('background/SelectedItem-rt.gif') no-repeat left -322px; /* orientation=rt */
  padding-right: 15px; /* orientation=lt */
  padding-left: 15px; /* orientation=rt */
  color: #526791;
}

.UIItemSelector .RightColumnBigItemStyle .ItemList .Item .ItemTitle {
  height: 32px; line-height: 32px; 
  background: url('background/SelectedItem.gif') repeat-x left -386px; /* orientation=lt */
  background: url('background/SelectedItem-rt.gif') repeat-x right -386px; /* orientation=rt */
  color: gray;
  padding-left: 10px; /* orientation=lt */
  padding-right: 10px; /* orientation=rt */
}


/*###########################- Item Selected -#############################*/
.UIItemSelector .RightColumnBigItemStyle .ItemList .SelectedItem {
  margin: 13px 6px;
  height: 32px;
  cursor: pointer;
}

.UIItemSelector .RightColumnBigItemStyle .ItemList .SelectedItem .UserAccountIcon {
  height: 32px;
  background: url('background/BigStyleUserAccountSelected.gif') no-repeat left; /* orientation=lt */
  background: url('background/BigStyleUserAccountSelected-rt.gif') no-repeat right; /* orientation=rt */
  padding-left: 30px; /* orientation=lt */
  padding-right: 30px; /* orientation=rt */
}

.UIItemSelector .RightColumnBigItemStyle .ItemList .SelectedItem .MembershipIcon {
  height: 32px;
  background: url('background/BigStyleMembershipSelected.gif') no-repeat left; /* orientation=lt */
  background: url('background/BigStyleMembershipSelected-rt.gif') no-repeat right; /* orientation=rt */
  padding-left: 30px; /* orientation=lt */
  padding-right: 30px; /* orientation=rt */
}

.UIItemSelector .RightColumnBigItemStyle .ItemList .SelectedItem .UserProfileIcon {
  height: 32px;
  background: url('background/SelectedItem.gif') no-repeat left -226px; /* orientation=lt */
  background: url('background/SelectedItem-rt.gif') no-repeat right -226px; /* orientation=rt */
  padding-left: 30px; /* orientation=lt */
  padding-right: 30px; /* orientation=rt */
}

.UIItemSelector .RightColumnBigItemStyle .ItemList .SelectedItem .UserHomeInfoIcon {
  height: 32px;
  background: url('background/SelectedItem.gif') no-repeat left -258px; /* orientation=lt */
  background: url('background/SelectedItem-rt.gif') no-repeat right -258px; /* orientation=rt */
  padding-left: 30px; /* orientation=lt */
  padding-right: 30px; /* orientation=rt */
}

.UIItemSelector .RightColumnBigItemStyle .ItemList .SelectedItem .UserBusinessInfoIcon {
  height: 32px;
  background: url('background/SelectedItem.gif') no-repeat left -290px; /* orientation=lt */
  background: url('background/SelectedItem-rt.gif') no-repeat right -290px; /* orientation=rt */
}

.UIItemSelector .RightColumnBigItemStyle .ItemList .SelectedItem .ItemName {
  height: 32px; line-height: 32px;
  background: url('background/SelectedItem.gif') no-repeat right -354px; /* orientation=lt */
  background: url('background/SelectedItem-rt.gif') no-repeat left -354px; /* orientation=rt */
  padding-right: 15px; /* orientation=lt */
  padding-left: 15px; /* orientation=rt */
  color: black;
}

.UIItemSelector .RightColumnBigItemStyle .ItemList .SelectedItem .ItemTitle {
  height: 32px; line-height: 32px; 
  background: #d3d3eb;
  font-weight: bold; color: black;
  padding-left: 10px; /* orientation=lt */
  padding-right: 10px; /* orientation=rt */
}

/*#####################- End Item Selected && END BIG STYLE -#########################*/

/*###########################- LeftColumnStyle (The Item List is on the left side) -#########################*/

.UIItemSelector .LeftColumnStyle {
  width: 99.5%;
  overflow: hidden;
}

.UIItemSelector .LeftColumnStyle .ItemListContainer {
  float: left;/* orientation=lt */
	float: right;/* orientation=rt */
  width: 175px;
}

.UIItemSelector .LeftColumnStyle .ItemListContainer .ItemList {
  border: 1px #a4a4a4 solid;
  background: white;
}

.UIItemSelector .LeftColumnStyle .ItemDetailList {
  height: auto;
  margin-left: 180px;/* orientation=lt */
  margin-right: 180px;/* orientation=rt */
  padding: 1px ;
}

.UIItemSelector .LeftColumnStyle .ItemDetailList .ItemDetail {
  height: 240px;
  background: white;
  border: 1px #a4a4a4 solid ;
}

.UIItemSelector .LeftColumnStyle .ItemDetailList .ItemDetailTitle{
  height: 22px;

}

.UIItemSelector .LeftColumnStyle .ItemListContainer .ItemListTitle {
	height: 23px;
}

.UIItemSelector .LeftColumnStyle .TitleIcon {
  float: left;/* orientation=lt */
	float: right;/* orientation=rt */
  margin: 0px 5px 0px 5px;
}

.UIItemSelector .LeftColumnStyle .Title {
  line-height: 22px;
  font-weight: bold; color: #5c5c5c; 
  float: left;/* orientation=lt */
	float: right;/* orientation=rt */
}

.UIItemSelector .LeftColumnStyle .ItemListIcon {
	width: 16px; height: 16px;
	background: url('background/SelectedItem.gif') no-repeat left -418px;
}

.UIItemSelector .LeftColumnStyle .ViewListIcon {
	width: 16px; height: 16px;
	background: url('background/SelectedItem.gif') no-repeat left -434px;
	margin-top: 3px;
}

/*##########################- Default Item  -#########################*/

.UIItemSelector .LeftColumnStyle .ItemList .Item {
  height: 26px ;
  cursor: pointer ;
  border-bottom: 1px solid #dfdfdf;
}

.UIItemSelector .LeftColumnStyle .ItemList .Item .LeftItem {
  background: url('background/SelectedItem.gif') no-repeat left top;/* orientation=lt */
  background: url('background/SelectedItem-rt.gif') no-repeat right top;/* orientation=rt */
  padding-left: 15px;/* orientation=lt */
  padding-right: 15px;/* orientation=rt */
  height: 26px;
}

.UIItemSelector .LeftColumnStyle .ItemList .Item .RightItem {
  height: 26px; line-height: 26px;
}

.UIItemSelector .LeftColumnStyle .ItemList .Item .ItemTitle {
  height: 26px; line-height: 24px; 
  padding-left: 5px;/* orientation=lt */
  padding-right: 5px;/* orientation=rt */
  white-space: nowrap;
  overflow: hidden;
  width: 95%;
}

.UIItemSelector .LeftColumnStyle .ItemList .Item .CenterItemTitle {
  width: 96%;
  overflow: hidden;
  white-space: nowrap;
}

/*###########################- Over Item (When mouse over on this item) -############################*/

.UIItemSelector .LeftColumnStyle .ItemList .OverItem {
  height: 26px ;
  cursor: pointer ;
  border-bottom: 1px solid #dfdfdf;
  background: url('background/SelectedItem.gif') repeat-x left -104px;
}

.UIItemSelector .LeftColumnStyle .ItemList .OverItem .LeftItem {
  background: url('background/SelectedItem.gif') no-repeat left -52px; /* orientation=lt */
  background: url('background/SelectedItem-rt.gif') no-repeat right -52px; /* orientation=rt */
  padding-left: 15px; /* orientation=lt */
  padding-right: 15px; /* orientation=rt */
}

.UIItemSelector .LeftColumnStyle .ItemList .OverItem .RightItem {
  height: 26px; line-height: 26px; 
  background: url('background/SelectedItem.gif') repeat-x left -104px;
}

.UIItemSelector .LeftColumnStyle .ItemList .OverItem .ItemTitle {
  height: 26px; line-height: 24px;
  color: #f67a02;
  padding-left: 5px; /* orientation=lt */
  padding-right: 5px; /* orientation=rt */
  white-space: nowrap;
  overflow: hidden;
  width: 95%;
}

.UIItemSelector .LeftColumnStyle .ItemList .OverItem .CenterItemTitle {
  width: 96%;
  overflow: hidden;
  white-space: nowrap;
}

/*##########################- Selected Item  (When Item is selected)-#########################*/

.UIItemSelector .LeftColumnStyle .ItemList .SelectedItem {
  height: 26px ;
  cursor: pointer ;
  border-bottom: 1px solid #dfdfdf;
}

.UIItemSelector .LeftColumnStyle .ItemList .SelectedItem .LeftItem {
  background: url('background/SelectedItem.gif') no-repeat left -26px; /* orientation=lt */
  background: url('background/SelectedItem-rt.gif') no-repeat right -26px; /* orientation=rt */
  padding-left: 15px;/* orientation=lt */
  padding-right: 15px;/* orientation=rt */
  height: 26px;
}

.UIItemSelector .LeftColumnStyle .ItemList .SelectedItem .RightItem {
  height: 25px; line-height: 23px;
  background: url('background/SelectedItem.gif') repeat-x left -78px;
}

.UIItemSelector .LeftColumnStyle .ItemList .SelectedItem .ItemTitle {
  height: 26px; 
  line-height: 24px;
  color: #0575CA; 
  padding-left: 5px; /* orientation=lt */
  padding-right: 5px; /* orientation=rt */
  white-space: nowrap;
  overflow: hidden;
  width: 95%;
}

.UIItemSelector .LeftColumnStyle .ItemList .SelectedItem .CenterItemTitle {
  width: 96%;
  overflow: hidden;
  white-space: nowrap;
}

/*###########################- End LeftColumnItemList -#########################*/

/*###########################- Layout Template -#########################*/

.UIItemSelector .EmptyLayout {
  width: 270px; height: 170px;
  margin: auto;
  background: url('background/ItemSelector.gif') no-repeat top left;
}

.UIItemSelector .DesktopLayout {
  width: 270px; height: 170px;
  margin: auto;
  background: url('background/TemplateContainer.jpg') no-repeat top left;
}

.UIItemSelector .DashboardLayout {
  width: 270px; height: 170px;
  margin: auto;
  background: url('background/DashboardLayout.jpg') no-repeat center;
}

.UIItemSelector .TwoColumnsLayout {
  width: 270px; height: 170px;
  margin: auto;
  background: url('background/ItemSelector.gif') no-repeat left -170px;
}

.UIItemSelector .ThreeColumnsLayout {
  width: 270px; height: 170px;
  margin: auto;
  background: url('background/ItemSelector.gif') no-repeat left -340px;
}

.UIItemSelector .TwoColumnsOneRowLayout {
  width: 270px; height: 170px;
  margin: auto;
  background: url('background/ItemSelector.gif') no-repeat left -510px;
}

.UIItemSelector .TwoColumnsTwoRowsLayout {
  width: 270px; height: 170px;
  margin: auto;
  background: url('background/ItemSelector.gif') no-repeat left -680px;
}

.UIItemSelector .TwoRowsLayout {
  width: 270px; height: 170px;
  margin: auto;
  background: url('background/ItemSelector.gif') no-repeat left -850px;
}

.UIItemSelector .ThreeRowsLayout {
  width: 270px; height: 170px;
  margin: auto;
  background: url('background/ItemSelector.gif') no-repeat left -1020px;
}

.UIItemSelector .OneRowTwoColumnsLayout {
  width: 270px; height: 170px;
  margin: auto;
  background: url('background/ItemSelector.gif') no-repeat left -1190px;
}

.UIItemSelector .TwoTabsLayout {
  width: 270px; height: 170px;
  margin: auto;
  background: url('background/ItemSelector.gif') no-repeat left -1360px;
}

.UIItemSelector .ThreeTabsLayout {
  width: 270px; height: 170px;
  margin: auto;
  background: url('background/ItemSelector.gif') no-repeat left -1530px;
}

.UIItemSelector .ThreeRowsTwoColumnsLayout {
  width: 270px; height: 170px;
  margin: auto;
  background: url('background/ItemSelector.gif') no-repeat left -1700px;
}